<template>
    <div class="freelance-container">
        <div class="freelance-header"></div>

        <div class="safeguard-container">
            <my-title title="自由职业者保障计划"></my-title>

            <div class="safeguard-title">让工作多一份自由，让生活多一份保障</div>
            <div class="safeguard-content">让自由职业者同样享受国家社会保障并且拥有私人税务顾问</div>
            <div class="safeguard-content">目前平台已累计为 1500 位自由职业者提供了保障</div>

            <div class="safeguard-logo"></div>

            <div class="safeguard-checked-body">
                <div class="safeguard-checked-content">
                    <div class="safeguard-checked-icon"></div>
                    <span>个人社保代缴服务</span>
                </div>
            </div>
            <div class="safeguard-checked-body">
                <div class="safeguard-checked-content">
                    <div class="safeguard-checked-icon"></div>
                    <span>高收入人群税务定制方案</span>
                </div>
            </div>
        </div>

        <div class="transaction-container">
            <div class="transaction-body" v-for="(item, key) in transactionData" @click="toContact(!!item.pageTitle, `${item.title}咨询`, item.pageTitle, item.typeId)">
                <div class="transaction-header" :class="`transaction-header-bg-${key + 1}`">
                    <div class="transaction-icon" :class="`transaction-icon-${key + 1}`"></div>
                    <div class="transaction-title">{{item.title}}</div>
                </div>
                <div class="transaction-content">{{item.content}}</div>
                <div class="transaction-price">{{item.price}}</div>
            </div>
        </div>

    </div>
</template>

<script>
	import myTitle from '../components/title'

    export default {
	    create() {
		    document.body.scrollTop = 0
	    },
	    components: {
		    myTitle
	    },
        data() {
	    	return {
			    transactionData: [{
			    	title: '个人社保代缴',
                    content: '全国385个地级市',
                    price: '70元/人/月 起'
                },{
				    title: '居住证办理',
				    content: '工作居住证一站式快速代办',
				    price: '350元/人/证 起',
				    pageTitle: '快速预约居住证办理顾问',
				    typeId: 5
			    },{
				    title: '入户办理',
				    content: '助你在异乡安家落户',
				    price: '2000元/人 次',
				    pageTitle: '快速预约异地安家顾问',
				    typeId: 6
			    },{
				    title: '个人税务优化',
				    content: '平台资深财税专家一对一服务',
				    price: '10000元/人/年 起',
				    pageTitle: '快速预约私人税务管家',
				    typeId: 2
			    }]
            }
        },
        methods: {
	    	toContact(type,typeName, pageTitle, typeId) {
                if(type) {
	                let ls = window.localStorage
	                ls.setItem('pageTitle', pageTitle)
	                ls.setItem('typeName', typeName)
	                ls.setItem('type', typeId)
	                ls.setItem('ifCompany', '')

	                document.body.scrollTop = 0
	                this.$router.push('contact')
                }else {
                    window.location.href = 'https://grsb.aiyuangong.com/index'
                }
            }
        }
    }
</script>

<style lang="scss">
    @import "../style/function";
    @import "../style/color";

    .freelance-header {
        background-image: url("../images/freelance/freelance-banner.png");
        width: pxToRem(750);
        height: pxToRem(510);
        background-size: 100% 100%;
        position: relative;
    }

    .safeguard-container {
        height: pxToRem(1100);
        background-color: $white;

        .safeguard-title {
            font-size: pxToRem(32);
            color: $grey;
            margin-bottom: pxToRem(40);
            text-align: center;
            font-weight: bold;
        }

        .safeguard-content {
            font-size: pxToRem(28);
            color: $grey;
            margin-bottom: pxToRem(30);
            font-style: italic;
            text-align: left;
            padding: 0 pxToRem(90);
        }

        .safeguard-logo {
            background-image: url("../images/freelance/freelance-logo.png");
            width: pxToRem(484);
            height: pxToRem(410);
            background-size: 100% 100%;
            margin: pxToRem(16) auto pxToRem(80);
        }

        .safeguard-checked-body {
            height: pxToRem(27);
            line-height: pxToRem(33);
            color: $dark-grey;
            font-size: pxToRem(24);
            margin: 0 0 pxToRem(20) pxToRem(220);

            .safeguard-checked-content {
                display: inline-block;

                .safeguard-checked-icon {
                    float: left;
                    background-image: url("../images/freelance/freelance-checked.png");
                    width: pxToRem(31);
                    height: pxToRem(27);
                    background-size: 100% 100%;
                    margin-right: pxToRem(18);
                }
            }
        }
    }

    .transaction-container {
        height: pxToRem(950);
        background-color: $lighter-grey;
        padding: pxToRem(50) pxToRem(14) 0 pxToRem(14);

        .transaction-body {
            width: pxToRem(328);
            height: pxToRem(410);
            margin: pxToRem(14);
            float: left;
            border: $light-grey2 solid pxToRem(2);
            text-align: center;
            background-color: $white;
            box-shadow: 1px 1px 5px $shadow-grey;

            .transaction-header {
                height: pxToRem(180);
                padding-top: pxToRem(60);
                width: pxToRem(328);
                background-size: 100% 100%;

                .transaction-icon {
                    width: pxToRem(82);
                    height: pxToRem(82);
                    background-size: 100% 100%;
                    margin: 0 auto pxToRem(22);
                }

                @for $i from 1 through 4 {
                    .transaction-icon-#{$i} {
                        background-image: url('../images/freelance/freelance-icon-' + $i + '.png');
                    }
                }

                .transaction-title {
                    font-size: pxToRem(28);
                    color: $white;
                }
            }

            @for $i from 1 through 4 {
                .transaction-header-bg-#{$i} {
                    background-image: url('../images/freelance/freelance-bg-' + $i + '.png');
                }
            }

            .transaction-content {
                font-size: pxToRem(24);
                color: $grey;
                margin-top: pxToRem(50);
            }

            .transaction-price {
                font-size: pxToRem(26);
                color: $red;
                margin-top: pxToRem(20);
                font-weight: bold;
            }
        }
    }

</style>
























